{% extends 'base.html' %}
{% block header %}
    <h1>{% block title %}分析{% endblock %}</h1>
{% endblock %}

{% block user %}
    {% block username %}
        {{ username }}
    {% endblock %}
{% endblock %}
{% block content %}

    <div style="text-align: center;">
        <span style="font-size: 26px;"> 处理器详情   </span>
        <span id="processor_name" style="font-size: 26px;">{{ processor_name }}</span>
    </div>
    <div class="container">
        <div id="bar1" style="width:1000px; height:550px; margin-top: 20px"></div>
        <div style="margin-top: 10px">
            <div>
                {{ grades |safe }}
            </div>
        </div>
        <div id="bar2" style="width:1000px; height:600px; margin-top: 40px"></div>
        <div style="margin-top: 20px">
                <span style="font-size: 20px; font-weight: bold">
                    {{ processor_name }}
                </span>
            <button type="button" class="btn btn-sm btn-primary" disabled> 数量: {{ cpu_num }} </button>
        </div>
        <div style="overflow-x:scroll;">
            <div>
                <table id="events" class="table table-sm table-hover" style="min-height:500px;">
                    <thead>
                    <tr>
                        {% for col in df_total.columns.tolist()[1:] %}
                            <th data-sortable="true">
                                {{ col }}
                            </th>
                        {% endfor %}
                    </tr>
                    </thead>
                    <tbody id="event-info">
                    {% for i in df_total.index %}
                        <tr>
                            {% for col in df_total.columns.tolist()[1:] %}{% if '链接' not in col %}
                                <td>
                                    <p id="{{ df_total.loc[i,col+'_sort'] }}" name="{{ col }}"
                                       title="{{ df_total.loc[i,col]}}">
                                        {{ df_total.loc[i,col]}} </p>
                                    {#                            #}
                                </td>
                            {% endif %}
                                {% if '链接' in col %}
                                    <td><a href="{{ df_total.loc[i,col]}}" class="btn btn-outline-primary btn-sm" role="button" aria-pressed="true">SPEC</a> </td>
                                {% endif %}
                            {% endfor %}

                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        $(
            function () {
                var chart1 = echarts.init(document.getElementById('bar1'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "/grade",
                    dataType: 'json',
                    success: function (result) {
                        chart1.setOption(result);
                    }
                });
                var chart2 = echarts.init(document.getElementById('bar2'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "/scatter",
                    dataType: 'json',
                    success: function (result) {
                        chart2.setOption(result);
                    }
                });
            }
        )
    </script>
{% endblock %}